@use '../core' as *;

.videoSection {
    display: flex;
    flex-direction: column;
    gap: $spacing-size-4;
    margin-bottom: $spacing-size-4;

    @media screen and (min-width: $breakpoint-docs-home-small) {
        flex-direction: row;
        align-items: flex-start;
    }
}

.header {
    font-size: var(--text-fs-lg);
}

.ytIframe {
    aspect-ratio: 16/9;
    border-radius: var(--radius-md);
    border: 2px solid var(--color-border-secondary);

    @media screen and (min-width: $breakpoint-docs-home-small) {
        max-width: 16rem;
    }
}
